<template>
  <div>
    <el-card class="box-card" shadow="always">
      <div style="width: 100%; text-align: center">
        <el-form inline @submit.native.prevent="search" style="aligin: center">
          <el-form-item>
            <el-input
              v-model="searchForm.queryConditions"
              clearable
              placeholder="产品名/描述信息"
              prefix-icon="el-icon-search"
              size="medium"
            />
          </el-form-item>
          <el-form-item>
            <el-button native-type="submit" size="medium" type="primary">
              搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 该div是循环卡片列表 -->
      <div style="width: 100%">
        <div style="margin-left: 10%">
          <el-row v-loading="qualificationLoading">
            <el-col
              :span="4"
              v-for="item in tabledata"
              :key="item.productId"
              :offset="1"
            >
              <div style="margin-top: 15px">
                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                  <img :src="item.imageUrl" class="image" />
                  <div>
                    <span>{{ item.productName }}</span>
                    <!-- <div class="bottom clearfix"> -->
                    <el-tooltip
                      content="申请资质"
                      placement="top"
                      style="float: right; margin: 3px"
                    >
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-thumb"
                        circle
                        @click="apply(item.productId)"
                      />
                    </el-tooltip>
                    <!-- <el-button type="text" class="button" @click="add(item)"
                        >申请</el-button
                      > -->
                    <!-- </div> -->
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>

        <div style="margin-left: 35%; margin-top: 3%">
          <!-- 该div是做分页的 -->
          <div class="block">
            <el-pagination
              :current-page="paging.current"
              :page-sizes="paging.pageSizes"
              :page-size="paging.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="paging.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getAllQualificationsNotApplied,
  applyQualification,
} from "@/api/qualification";
export default {
  data() {
    return {
      //循环卡片列表的数据源
      tabledata: null,
      // 查询条件
      searchForm: {
        queryConditions: "",
      },
      paging: {
        total: 0,
        current: 1,
        pageSizes: [8, 12, 16],
        size: 8,
      },
      qualificationLoading: false,


    };
  },
  created() {
    this.qualificationLoading = true;
    this.getData();
  },
  methods: {
    search() {
      this.paging.current = 1;
      this.qualificationLoading = true;
      this.getData();
    },
    // 获取所有数据
    getData() {
      const form = {
        ...this.searchForm,
        supplierId: this.$store.getters.accountId,
        page: this.paging.current,
        pageSize: this.paging.size,
      };
      getAllQualificationsNotApplied(form)
        .then((res) => {
          if (res.code === 200) {
            this.tabledata = res.data.qualificationProducts;
            this.paging.total = res.data.totalCount;
            this.qualificationLoading = false;
          }
        })
        .catch((err) => {
          // 如果没有数据就显示为空
          this.tabledata = [];
          // 返还每页显示的条数
          //this.paging.size = res.data.size;
          this.paging.total = 0;
          this.qualificationLoading = false;
        });
    },
    apply(productId) {
      console.log(productId);
      this.$confirm("您即将提交资质审核申请, 是否继续?", "提示", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            productId: productId,
            supplierId: this.$store.getters.accountId,
          };
          const result = await applyQualification(data);
          console.log(result);
          if (result.code === 200) {
            this.$message({
              type: "success",
              message: "提交成功,等待采购员审核资质!",
            });
            this.getData();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "申请取消",
          });
        });
    },
    handleSizeChange(val) {
      this.paging.current = 1;
      this.paging.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.paging.current = val;
      this.getData();
    },
  },
};
</script>


<style scoped>
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.image {
  width: 150px;
  height: 150px;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
